import React, { memo, useEffect, useRef, useState } from "react";
import { Editor, Toolbar } from "@wangeditor/editor-for-react";
import type {
  IDomEditor,
  IEditorConfig,
  IToolbarConfig,
} from "@wangeditor/editor";

import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { useRafTimeout } from "ahooks";
import styles from "./index.module.scss";
import { addValueToOlLi, debounce } from "@/app/utils";

const toolbarConfig: Partial<IToolbarConfig> = {
  toolbarKeys: [
    "bold",
    // 'italic',
    "color",
    "header2",
    "header3",
    "bulletedList",
    "numberedList",
    // 'justifyLeft',
    // 'justifyRight',
    "clearStyle",
    "fullScreen",
  ],
};

function MyEditor(props: any) {
  const [editor, setEditor] = useState<IDomEditor | null>(null); // 存储 editor 实例
  const [html, setHtml] = useState("");

  // const editor = useRef<IDomEditor | null>()
  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return;
      editor?.destroy();
    };
  }, []);

  const onChange = debounce((e: any) => {
    if (e.getText()) {
      // const ht = addValueToOlLi(e.getHtml())
      props.onChange(addValueToOlLi(e.getHtml()));
    } else {
      props.onChange("");
    }
  }, 300);
  // const onChange = (e: any) => {

  // }
  // useEffect(() => {
  //   if (props.value && editor) {
  //     let html = ''
  //     if (props.value.trim()[0] === '<') {
  //       html = `<>${props.value}</>`
  //     }
  //     else {
  //       html = `<p>${props.value}</p>`
  //     }

  //     editor?.setHtml(html)
  //   }
  // }, [props.value, editor])
  useRafTimeout(() => {
    if (props.value) {
      setHtml(props.value);
    }
  }, 200);

  function onCreated(e: any) {
    setEditor(e);
  }
  // let html = ''

  // if (props.value) {
  //   if (props.value.trim()[0] === '<') {
  //     html = `<>${props.value}</>`
  //   }
  //   else {
  //     html = `<div>${props.value}</div>`
  //   }
  // }
  // else {
  //   html = `<>${props.value}</>`
  // }
  const editorConfig: Partial<IEditorConfig> = {
    placeholder: "请输入内容...",
    autoFocus: false,
    onCreated,
    onChange,
    // customPaste(editor: IDomEditor, event: ClipboardEvent) {
    //   const tableRegex = /<table[^>]*>[\s\S]*?<\/table>/gi;

    //   // 使用正则表达式替换 <table> 标签及其内容为空字符串
    //   const html = event.clipboardData.getData("text/html"); // 获取粘贴的纯文本
    //   const filteredHTML = html.replace(tableRegex, "");

    //   console.log("====================================");
    //   console.log(html, filteredHTML);
    //   console.log("====================================");
    //   setTimeout(() => {
    //     editor.setHtml(filteredHTML);
    //   }, 100);
    //   setTimeout(() => {
    //     console.log("====================================");
    //     console.log(editor.getHtml());
    //     console.log("====================================");
    //   }, 1000);
    //   // 阻止默认的粘贴行为
    //   event.preventDefault();
    //   return false;
    // },
  };
  return (
    <div className={styles.editor}>
      <Toolbar
        editor={editor}
        defaultConfig={toolbarConfig}
        mode="simple"
        style={{
          borderBottom: "1px solid #f5f2f0",
          position: props.titleFiexd ? "fixed" : "",
          top: 0,
          left: 0,
          width: "100%",
          zIndex: 100,
        }}
      />
      {
        <Editor
          defaultConfig={editorConfig}
          mode="simple"
          value={html}
          style={
            props.titleFiexd
              ? { paddingTop: "40px", height: "300px", overflowY: "hidden" }
              : { height: "300px", overflowY: "hidden" }
          }
        />
      }
    </div>
  );
}

export default memo(MyEditor, (o, n) => {
  return o.value === n.value;
});
